<template>
  <!-- 方案规划导航栏 -->
  <div style="height: 100%;margin-left: -14vh;position: absolute;">
 
    

    <div id="areaDiv1" style="position: absolute;left: 16vh;top: 1vh;" class="areaBox"> 
        
      <div style="display: inline-flex;width: 100%;">
        <img class="imgClass" src="../../assets/images/dw.png" />
        <div style="width: 68%;font-size:1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">电网</div>
      </div>
      <!-- <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
        <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">购电上限：{{ form.electricityPurchaseLimit }} kW</div>
        <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">售电上限：{{ form.electricitySalesCeiling }} 万元</div>
      </div> -->
    </div>
            
    <div id="areaDiv2" style="position: absolute;left: 35vh;top: 1vh;width: 15vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/gfHeat.png" />
          <div style="width: 68%;font-size:1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">光伏/热</div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.photovoltaicHeatCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.photovoltaicHeatUnitInvestCost }} 万元</div>
        </div>
    </div>
            
    <div id="areaDiv3" style="position: absolute;left: 68vh;top: 1vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/gf_w.png" />
          <div style="width: 68%;font-size:1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">光伏</div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.photovoltaicCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.photovoltaicUnitInvestCost }} 万元</div>
        </div>
    </div>
    
    <div id="areaDiv4" style="position: absolute;left:87vh;top: 1vh;" class="areaBox"> 
        
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/fj.png" />
          <div style="width: 68%;font-size:1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">风机</div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.fanCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.fanUnitInvestCost }} 万元</div>
        </div>
    </div>
      
       
    
    
    <div id="areaDiv5" style="position: absolute;left:116vh;top: 1vh;" class="areaBox"> 
        
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/dc.png" />
          <div style="width: 68%;font-size:1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">锂电池</div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.lithiumaBatteryCapUp }} kWh</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.lithiumaBatteryUnitInvestCost }} 万元</div>
        </div>
    </div>
    
         
    <div id="areaDiv6" style="position: absolute;left:135vh;top: 1vh;width: 17vh;" class="areaBox"> 
        
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/qsdc.png" />
          <div style="width: 68%;font-size:1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">铅酸电池</div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.leadAcidCapUp }} kWh</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.leadAcidUnitInvestCost }} 万元</div>
        </div>
    </div>
     
    <div id="areaDiv7" style="position: absolute;left: 16vh;top:20vh;width: 17vh;" class="areaBox"> 
      <div style="display: inline-flex;width: 100%;">
        <img class="imgClass" src="../../assets/images/gyfcq.png" />
        <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
         工业副产氢 
        </div>
      </div>
      <!-- <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
        <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">购氢上限：{{ form.hydrogenPurchaseLimit }} kW</div>
      </div> -->
    </div>


         
    <div id="areaDiv77" style="position: absolute;left: 41vh;top:20vh;width: 17vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/djc_w.png" />
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
            ALK电解槽
          </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.alkElectCellCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.alkElectCellUnitInvestCost }} 万元</div>
        </div>
    </div>

           
    <div id="areaDiv8" style="position: absolute;left: 60vh;top:20vh;width: 17vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/djc_w.png" />
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
            PEM电解槽
          </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.pemElectCellCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.pemElectCellUnitInvestCost }} 万元</div>
        </div>
    </div>

    
           
    <div id="areaDiv9" style="position: absolute;left: 79vh;top:20vh;width: 17vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/djc_w.png" />
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
            AEM电解槽
          </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.aemElectCellCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.aemElectCellUnitInvestCost }} 万元</div>
        </div>
    </div>

       
           
    <div id="areaDiv10" style="position: absolute;left: 98vh;top:20vh;width: 17vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/cq.png" />
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
            固态储氢
          </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.gtHydrogenStorageCapUp }} kg</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.gtHydrogenStorageUnitInvestCost }} 万元</div>
        </div>
    </div>

           
    <div id="areaDiv11" style="position: absolute;left: 117vh;top:20vh;width: 17vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/cq.png" />
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
            气态储氢
          </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.qtHydrogenStorageCapUp }} kg</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.qtHydrogenStorageUnitInvestCost }} 万元</div>
        </div>
    </div>

           
    <div id="areaDiv12" style="position: absolute;left: 136vh;top:20vh;width: 17vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/cq.png" />
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
            液态储氢 
          </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.ytHydrogenStorageCapUp }} kg</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.ytHydrogenStorageUnitInvestCost }} 万元</div>
        </div>
    </div>

     
    <div id="areaDiv13" style="position: absolute;left: 155vh;top:20vh;width: 17vh;" class="areaBox"> 
      <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/rldc.png" />
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
            燃料电池 
          </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.fuelCellCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.fuelCellUnitInvestCost }} 万元</div>
        </div>
    </div>


    
    <div id="areaDiv14" style="position: absolute;left: 16vh;top: 39vh;" class="areaBox"> 
      <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/jrq.png" />
          <div style="width: 68%;font-size:1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">集热器</div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.collectorCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.collectorUnitInvestCost }} 万元</div>
        </div>
    </div>



    <div id="areaDiv15" style="position: absolute;left: 51vh;top: 39vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/dyrb.png" />
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
            地源热泵 
          </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.dyHeatPumpCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.dyHeatPumpUnitInvestCost }} 万元</div>
        </div>
    </div>

     
    <div id="areaDiv16" style="position: absolute;left: 69vh;top: 39vh;width: 19vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/kqyrb.png" />
          
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
            空气源热泵 
          </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.kqyHeatPumpCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.kqyHeatPumpUnitInvestCost }} 万元</div>
        </div>
    </div>

          
    <div id="areaDiv17" style="position: absolute;left: 90vh;top: 39vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/syrb.png" />
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
            水源热泵 
          </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.syHeatPumpCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.syHeatPumpUnitInvestCost }} 万元</div>
        </div>
    </div>

               
    <div id="areaDiv18" style="position: absolute;left: 108vh;top: 39vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/gthr.png" />
          <div style="width: 68%;font-size: 1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">
          固体蓄热
        </div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.gtThermalStorageCapUp }} kWh</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.gtThermalStorageUnitInvestCost }} 万元</div>
        </div>
    </div>
               
    <div id="areaDiv19" style="position: absolute;left: 126vh;top: 39vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/sxr.png" />
          <div style="width: 68%;font-size:1.1vw;margin-top: 0.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">水蓄热</div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.waterThermalStorageCapUp }} kWh</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.waterThermalStorageUnitInvestCost }} 万元</div>
        </div>
    </div>

     
     <!-- <div id="lineDiv1" style="position: absolute;left: 16vh;top: 14.5vh;height: 0.5%;width: 76%;background: #95ef8499;" ></div> -->


    <div id="anchorPoin-1" style="width: 1vh;height: 1vh;left: 23vh;top: 8.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin1" style="width: 1vh;height: 1vh;left: 23vh;top: 14.5vh;float: right;position: absolute;"></div>

    <div id="anchorPoin-2" style="width: 1vh;height: 1vh;left: 37vh;top: 8.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin2" style="width: 1vh;height: 1vh;left: 37vh;top: 53vh;float: right;position: absolute;"></div>

    <div id="anchorPoin-3" style="width: 1vh;height: 1vh;left: 39vh;top: 8.5vh;;float: right;position: absolute;"></div>
    <div id="anchorPoin3" style="width: 1vh;height: 1vh;left: 39vh;top: 14.5vh;float: right;position: absolute;"></div>
    
    
    <div id="anchorPoin-4" style="width: 1vh;height: 1vh;left: 76vh;top: 8.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin4" style="width: 1vh;height: 1vh;left: 76vh;top: 14.5vh;float: right;position: absolute;"></div>
      
        
    <div id="anchorPoin-5" style="width: 1vh;height: 1vh;left: 94vh;top: 8.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin5" style="width: 1vh;height: 1vh;left: 94vh;top: 14.5vh;float: right;position: absolute;"></div>
                  
    <div id="anchorPoin-7" style="width: 1vh;height: 1vh;left: 123vh;top: 8.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin7" style="width: 1vh;height: 1vh;left: 123vh;top: 14.5vh;float: right;position: absolute;"></div>
      
                      
    <div id="anchorPoin-8" style="width: 1vh;height: 1vh;left: 142vh;top: 8.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin8" style="width: 1vh;height: 1vh;left: 142vh;top: 14.5vh;float: right;position: absolute;"></div>
    
    <div id="anchorPoin-9" style="width: 1vh;height: 1vh;left: 23vh;top: 27.6vh;float: right;position: absolute;"></div>
    <div id="anchorPoin9" style="width: 1vh;height: 1vh;left: 23vh;top: 34vh;float: right;position: absolute;"></div>
      
              
                            
    <div id="anchorPoin-10" style="width: 1vh;height: 1vh;left: 49vh;top: 13.8vh;float: right;position: absolute;"></div>
    <div id="anchorPoin10" style="width: 1vh;height: 1vh;left: 49vh;top: 20vh;float: right;position: absolute;"></div>
                                    
    <div id="anchorPoin-11" style="width: 1vh;height: 1vh;left: 49vh;top: 27.6vh;float: right;position: absolute;"></div>
    <div id="anchorPoin11" style="width: 1vh;height: 1vh;left: 49vh;top: 34vh;float: right;position: absolute;"></div>
      

        
    <div id="anchorPoin-13" style="width: 1vh;height: 1vh;left: 58.5vh;top: 14vh;float: right;position: absolute;"></div>
    <div id="anchorPoin13" style="width: 1vh;height: 1vh;left: 58.5vh;top: 39vh;float: right;position: absolute;"></div>
      
                          
    <div id="anchorPoin-14" style="width: 1vh;height: 1vh;left: 68vh;top: 13.8vh;float: right;position: absolute;"></div>
    <div id="anchorPoin14" style="width: 1vh;height: 1vh;left: 68vh;top: 20vh;float: right;position: absolute;"></div>
            
                        
    <div id="anchorPoin-15" style="width: 1vh;height: 1vh;left: 68vh;top: 27.6vh;float: right;position: absolute;"></div>
    <div id="anchorPoin15" style="width: 1vh;height: 1vh;left: 68vh;top: 34vh;float: right;position: absolute;"></div>
            
    <div id="anchorPoin-16" style="width: 1vh;height: 1vh;left: 77.6vh;top: 14vh;float: right;position: absolute;"></div>
    <div id="anchorPoin16" style="width: 1vh;height: 1vh;left: 77.6vh;top: 39vh;float: right;position: absolute;"></div>
      
    
                                
    <div id="anchorPoin-17" style="width: 1vh;height: 1vh;left: 87vh;top: 13.8vh;float: right;position: absolute;"></div>
    <div id="anchorPoin17" style="width: 1vh;height: 1vh;left: 87vh;top: 20vh;float: right;position: absolute;"></div>
            
                        
    <div id="anchorPoin-18" style="width: 1vh;height: 1vh;left: 87vh;top: 27.6vh;float: right;position: absolute;"></div>
    <div id="anchorPoin18" style="width: 1vh;height: 1vh;left: 87vh;top: 34vh;float: right;position: absolute;"></div>
            
    <div id="anchorPoin-19" style="width: 1vh;height: 1vh;left: 96.6vh;top: 14vh;float: right;position: absolute;"></div>
    <div id="anchorPoin19" style="width: 1vh;height: 1vh;left: 96.6vh;top: 39vh;float: right;position: absolute;"></div>
    
                                      
    <div id="anchorPoin-20" style="width: 1vh;height: 1vh;left: 106vh;top: 13.8vh;float: right;position: absolute;"></div>
    <div id="anchorPoin20" style="width: 1vh;height: 1vh;left: 106vh;top: 20vh;float: right;position: absolute;"></div>
            
                        
    <div id="anchorPoin-21" style="width: 1vh;height: 1vh;left: 106vh;top: 27.6vh;float: right;position: absolute;"></div>
    <div id="anchorPoin21" style="width: 1vh;height: 1vh;left: 106vh;top: 34vh;float: right;position: absolute;"></div>
    
                                      
    <div id="anchorPoin-22" style="width: 1vh;height: 1vh;left: 125vh;top: 13.8vh;float: right;position: absolute;"></div>
    <div id="anchorPoin22" style="width: 1vh;height: 1vh;left: 125vh;top: 20vh;float: right;position: absolute;"></div>
            
                        
    <div id="anchorPoin-23" style="width: 1vh;height: 1vh;left: 125vh;top: 27.6vh;float: right;position: absolute;"></div>
    <div id="anchorPoin23" style="width: 1vh;height: 1vh;left: 125vh;top: 34vh;float: right;position: absolute;"></div>
                  
    <div id="anchorPoin-24" style="width: 1vh;height: 1vh;left: 115.6vh;top: 14vh;float: right;position: absolute;"></div>
    <div id="anchorPoin24" style="width: 1vh;height: 1vh;left: 115.6vh;top: 39vh;float: right;position: absolute;"></div>
    
                                            
    <div id="anchorPoin-25" style="width: 1vh;height: 1vh;left: 144vh;top: 13.8vh;float: right;position: absolute;"></div>
    <div id="anchorPoin25" style="width: 1vh;height: 1vh;left: 144vh;top: 20vh;float: right;position: absolute;"></div>
            
                        
    <div id="anchorPoin-26" style="width: 1vh;height: 1vh;left: 144vh;top: 27.6vh;float: right;position: absolute;"></div>
    <div id="anchorPoin26" style="width: 1vh;height: 1vh;left: 144vh;top: 34vh;float: right;position: absolute;"></div>
      
                                          
    <div id="anchorPoin-27" style="width: 1vh;height: 1vh;left: 163vh;top: 13.8vh;float: right;position: absolute;"></div>
    <div id="anchorPoin27" style="width: 1vh;height: 1vh;left: 163vh;top: 20vh;float: right;position: absolute;"></div>
            
                        
    <div id="anchorPoin-28" style="width: 1vh;height: 1vh;left: 161vh;top: 27.6vh;float: right;position: absolute;"></div>
    <div id="anchorPoin28" style="width: 1vh;height: 1vh;left: 161vh;top: 53vh;float: right;position: absolute;"></div>
      
                      
    <div id="anchorPoin-29" style="width: 1vh;height: 1vh;left: 163vh;top: 27.6vh;float: right;position: absolute;"></div>
    <div id="anchorPoin29" style="width: 1vh;height: 1vh;left: 163vh;top: 34vh;float: right;position: absolute;"></div>

                            
    <div id="anchorPoin-30" style="width: 1vh;height: 1vh;left: 23vh;top: 46.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin30" style="width: 1vh;height: 1vh;left: 23vh;top: 53vh;float: right;position: absolute;"></div>
      
        
                      
    <div id="anchorPoin-31" style="width: 1vh;height: 1vh;left: 57vh;top: 46.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin31" style="width: 1vh;height: 1vh;left: 57vh;top: 53vh;float: right;position: absolute;"></div>
              
    <div id="anchorPoin-32" style="width: 1vh;height: 1vh;left: 59vh;top: 46.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin32" style="width: 1vh;height: 1vh;left: 59vh;top: 69.5vh;float: right;position: absolute;"></div>
      
                
    <div id="anchorPoin-33" style="width: 1vh;height: 1vh;left: 75vh;top: 46.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin33" style="width: 1vh;height: 1vh;left: 75vh;top: 53vh;float: right;position: absolute;"></div>
              
    <div id="anchorPoin-34" style="width: 1vh;height: 1vh;left: 77vh;top: 46.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin34" style="width: 1vh;height: 1vh;left: 77vh;top: 69.5vh;float: right;position: absolute;"></div>
      
                
    <div id="anchorPoin-35" style="width: 1vh;height: 1vh;left: 96vh;top: 46.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin35" style="width: 1vh;height: 1vh;left: 96vh;top: 53vh;float: right;position: absolute;"></div>
              
    <div id="anchorPoin-36" style="width: 1vh;height: 1vh;left: 98vh;top: 46.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin36" style="width: 1vh;height: 1vh;left: 98vh;top: 69.5vh;float: right;position: absolute;"></div>
      

                  
    <div id="anchorPoin-136" style="width: 1vh;height: 1vh;left: 115.6vh;top: 46.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin136" style="width: 1vh;height: 1vh;left: 115.6vh;top: 53vh;float: right;position: absolute;"></div>
        
                  
    <div id="anchorPoin-37" style="width: 1vh;height: 1vh;left: 133vh;top: 46.5vh;float: right;position: absolute;"></div>
    <div id="anchorPoin37" style="width: 1vh;height: 1vh;left: 133vh;top: 53vh;float: right;position: absolute;"></div>
        
                        
    <div id="anchorPoin-38" style="width: 1vh;height: 1vh;left: 153.5vh;top: 14vh;;float: right;position: absolute;"></div>
    <div id="anchorPoin38" style="width: 1vh;height: 1vh;left: 153.5vh;top: 57vh;float: right;position: absolute;"></div>
        
                              
    <div id="anchorPoin-39" style="width: 1vh;height: 1vh;left: 114vh;top: 52vh;;float: right;position: absolute;"></div>
    <div id="anchorPoin39" style="width: 1vh;height: 1vh;left: 114vh;top: 57vh;;float: right;position: absolute;"></div>
        
                          
    <div id="anchorPoin-40" style="width: 1vh;height: 1vh;left: 114vh;top: 64vh;;float: right;position: absolute;"></div>
    <div id="anchorPoin40" style="width: 1vh;height: 1vh;left: 114vh;top: 69.5vh;;float: right;position: absolute;"></div>
        
                          
    <div id="anchorPoin-41" style="width: 1vh;height: 1vh;left: 135vh;top: 64vh;;float: right;position: absolute;"></div>
    <div id="anchorPoin41" style="width: 1vh;height: 1vh;left: 135vh;top: 69.5vh;;float: right;position: absolute;"></div>
    
                          
    <div id="anchorPoin-42" style="width: 1vh;height: 1vh;left: 154vh;top: 64vh;;float: right;position: absolute;"></div>
    <div id="anchorPoin42" style="width: 1vh;height: 1vh;left: 154vh;top: 69.5vh;;float: right;position: absolute;"></div>
    

                                
    <div id="linePoin-1" style="width: 1vh;height: 1vh;left: 14vh;top: 14.3vh;float: right;position: absolute;"></div>
    <div id="linePoin1" style="width: 1vh;height: 1vh;left: 174vh;top: 14.3vh;float: right;position: absolute;"></div>
    
    <div id="linePoin-2" style="width: 1vh;height: 1vh;left: 14vh;top: 33.7vh;float: right;position: absolute;"></div>
    <div id="linePoin2" style="width: 1vh;height: 1vh;left: 174vh;top: 33.7vh;float: right;position: absolute;"></div>
      
    <div id="linePoin-3" style="width: 1vh;height: 1vh;left: 14vh;top: 52.6vh;float: right;position: absolute;"></div>
    <div id="linePoin3" style="width: 1vh;height: 1vh;left: 174vh;top: 52.6vh;float: right;position: absolute;"></div>
    

    <!-- <div id="lineDiv2" style="position: absolute;left: 16vh;top: 34vh;height: 0.5%;width: 76%;background: rgb(41 194 239 / 55%);" ></div> -->

    <!-- <div id="lineDiv3" style="position: absolute;left: 16vh;top: 53vh;height: 0.5%;width: 76%;background: #FF0000;" ></div> -->


    
    <div id="areaDiv20" style="position: absolute;left: 105vh;top: 57vh;width: 19vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/xsszl.png" />
          <div style="width: 68%;font-size:1.1vw;margin-top: 0.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">吸收式制冷</div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.absorptionRefrigeraCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.absorptionRefrigeraUnitInvestCost }} 万元</div>
        </div>
    </div>

      
    
    <div id="areaDiv21" style="position: absolute;left: 127vh;top: 57vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/xl.png" />
          <div style="width: 68%;font-size:1.1vw;margin-top: 0.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">水蓄冷</div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.chilledWaterThermalStorageCapUp }} kWh</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.chilledWaterThermalStorageUnitInvestCost }} 万元</div>
        </div>
    </div>

      
    
    <div id="areaDiv22" style="position: absolute;left: 146vh;top: 57vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/xl.png" />
          <div style="width: 68%;font-size:1.1vw;margin-top: -0.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">冰蓄冷</div>
        </div>
        <div style="margin-top: -0.5vh;width: 97%;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.iceThermalStorageCapUp }} kW</div>
          <div style="font-size: 15px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;margin-top: -0.3vh;">投资成本：{{ form.iceThermalStorageUnitInvestCost }} 万元</div>
        </div>
    </div>

    <div id="lineDiv4" style="position: absolute;left: 16vh;top: 69.5vh;height: 0.5%;width: 157vh;background: #7030A0;" ></div>


    
    <div style="position: absolute;left: 174vh;top: 8vh;" class="areaBox2"> 
          <div style="display: block;width: 100%;text-align: center;margin-top: 7vh;">
            <img style="position: absolute;top:1vh;left: 1.6vh;" class="imgClass2" src="../../assets/images/fh.png" />
          </div>
          
          <div style="width: 100%;text-align:center;font-size: 1.2vw;margin-top: -0.5vh;color: #FFFFFF;font-family: cursive;">电负荷</div>
      </div>

      <div style="position: absolute;left: 174vh;top: 29vh;" class="areaBox2"> 
          <div style="display: block;width: 100%;text-align: center;margin-top: 7vh;">
            <img style="position: absolute;top:1vh;left: 1.6vh;" class="imgClass2" src="../../assets/images/yq.png" />
          </div>
          <div style="width: 100%;text-align:center;font-size: 1.2vw;margin-top: -0.5vh;color: #FFFFFF;font-family: cursive;">氢负荷</div>
      </div>

    
 
      <div style="position: absolute;left: 174vh;top: 47vh;" class="areaBox2"> 
          <div style="display: block;width: 100%;text-align: center;margin-top: 7vh;">
            <img style="position: absolute;top:1vh;left: 1.6vh;" class="imgClass2" src="../../assets/images/rfh.png" />
          </div>
          <div style="width: 100%;text-align:center;font-size: 1.2vw;margin-top: -0.5vh;color: #FFFFFF;font-family: cursive;">热负荷</div>
      </div>

      
       
      <div style="position: absolute;left: 174vh;top: 61vh;" class="areaBox2"> 
          <div style="display: block;width: 100%;text-align: center;margin-top: 0vh;">
            <img style="position: absolute;top:1vh;left: 1.6vh;" class="imgClass2" src="../../assets/images/lfh.png" />
          </div>
          <div style="width: 100%;text-align:center;font-size: 1.2vw;margin-top: 5.5vh;color: #FFFFFF;font-family: cursive;">冷负荷</div>
      </div>

    <div style="position: absolute;left: 16vh;top: 69.5vh;height: 0.5%;width: 90%;background: #7030A0;" ></div>

  </div>
</template>

<script>


  export default {
    name: 'heConfigurationPlan',
    
    beforeRouteLeave (to, from, next) {
       
      for(var i = 0;i<this.connectionArr.length;i++){
        var key = this.connectionArr[i];
        var connRem = this.connectionMaps.get(key);
       
        if(connRem){ 
       
          this.$jsPlumbObj.deleteConnection(connRem);  
          this.connectionMaps.put(key,"");
          // this.$nextTick(function(){
          //   this.$jsPlumbObj.deleteConnection(connRem);  
          // });
        }

      }
      
      var connDivs = $(".jtk-connector");
      var endpointDivs = $(".jtk-endpoint");

      if(connDivs){
        for(var i = 0;i<connDivs.length;i++){
          var dom = connDivs[i];
          $(dom).remove();
        }
      }

      if(endpointDivs){
        for(var i = 0;i<endpointDivs.length;i++){
          var dom = endpointDivs[i];
          $(dom).remove();
        }
      }

      next();
    },
    data() {
      return {
  
        form: {
          id:"",
          projectId:"",
          schemeName:"",

          checkScheme:"",

          isHavaDw: '1',
          isHavaGfHeat: '1',
          isHavaGf: '1',
          isHavaFj: '1',
          isHavaLdc : "1", 
          isHavaQsdc: '1',
          isHavaGyfcq : "1",
          isHavaAlkDjc: "1",
          isHavaPemDjc: "1",
          isHavaAemDjc: "1",
          isHavaGtcq : "1",
          isHavaQtcq : "1",
          isHavaYtcq : "1",
          isHavaRldc : "1",
          isHavaJrq : "1",
          isHavaDyrb : "1",
          isHavaKqyrb : "1",
          isHavaSyrb : "1",
          isHavaGtxr : "1",
          isHavaSxr : "1",
          isHavaXsszl : "1",
          isHavaSxl : "1",
          isHavaBxl: "1",

          configureTarget:"1", 
          electricityPurchaseLimit : "",
          electricitySalesCeiling : "",

          photovoltaicHeatCapUp : "",
          photovoltaicHeatUnitInvestCost : "", 

          photovoltaicCapUp : "",
          photovoltaicUnitInvestCost : "", 

 
          fanCapUp : "",
          fanUnitInvestCost : "",

          lithiumaBatteryCapUp : "",
          lithiumaBatteryUnitInvestCost : "",

          leadAcidCapUp : "",
          leadAcidUnitInvestCost : "",
         
          hydrogenPurchaseLimit : "", 

          
          alkElectCellCapUp : "",
          alkElectCellUnitInvestCost : "",

          pemElectCellCapUp : "",
          pemElectCellUnitInvestCost : "",
          
          aemElectCellCapUp : "",
          aemElectCellUnitInvestCost : "",
          
               
          gtHydrogenStorageCapUp : "",
          gtHydrogenStorageUnitInvestCost : "",
          
               
          qtHydrogenStorageCapUp : "",
          qtHydrogenStorageUnitInvestCost : "",
                  
          ytHydrogenStorageCapUp : "",
          ytHydrogenStorageUnitInvestCost : "",
                      
          
          fuelCellCapUp : "",
          fuelCellUnitInvestCost : "",

          collectorCapUp : "",
          collectorUnitInvestCost : "",
       
          dyHeatPumpCapUp : "", 
          dyHeatPumpUnitInvestCost : "",

          kqyHeatPumpCapUp : "", 
          kqyHeatPumpUnitInvestCost : "",

          syHeatPumpCapUp : "", 
          syHeatPumpUnitInvestCost : "",

          
          gtThermalStorageCapUp : "",
          gtThermalStorageUnitInvestCost : "",

          waterThermalStorageCapUp : "",
          waterThermalStorageUnitInvestCost : "",
 

          absorptionRefrigeraCapUp : "",
          absorptionRefrigeraUnitInvestCost : "",

          chilledWaterThermalStorageCapUp : "",
          chilledWaterThermalStorageUnitInvestCost : "",

          iceThermalStorageCapUp : "",
          iceThermalStorageUnitInvestCost : "",
        },
        projectId : '',
        $jsPlumbObj : {},
        connectionMaps : {}, 
        connectionArr : [],
        schemeId : "",

      }
    },
    created() {
     
       
    },
    mounted: function() {
      this.projectId = this.$route.query.projectId;
      this.schemeId = this.$route.query.schemeId;

      this.connectionMaps = this.getMap();
      this.generateWorkFlow();

      this.queryPageData();
    },
    methods: {  

      queryPageData : function(){

        var vm = this;
        
        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryConfigurationPlan?schemeId='+this.schemeId+"&tableName=he_configuration_plan&projectId=").then((res) => {
          var result = res.data.data;

          if(result){
            vm.form = result;
            
            
            //////
            var color1 = "#6ba785";
            var color2 = "#4AA0D6"; 
            var color3 = "#FF0000";  
            var color4 = "#7030A0"; 

            var anchor = ['Bottom', 'Top'];

            if(vm.form.isHavaDw=="1"){
              $("#areaDiv1").show(1000);
              vm.connectDiv("anchorPoin-1","anchorPoin1",anchor,"Straight",color1,"");
              vm.connectDiv("anchorPoin1","anchorPoin-1",anchor,"Straight",color1,"");
            }else{
            
              var key = "anchorPoin-1_anchorPoin1";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

              var key = "anchorPoin1_anchorPoin-1";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }


              $("#areaDiv1").hide(1000);
              vm.form.electricityPurchaseLimit = "0";
              vm.form.electricitySalesCeiling = "0"; 

            }

            
            if(vm.form.isHavaGfHeat=="1"){
              $("#areaDiv2").show(1000);

              vm.connectDiv("anchorPoin-2","anchorPoin2",anchor,"Straight",color3,"");
              vm.connectDiv("anchorPoin-3","anchorPoin3",anchor,"Straight",color1,"");

            }else{
            
              var key = "anchorPoin-2_anchorPoin2";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

              var key = "anchorPoin-3_anchorPoin3";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }


              $("#areaDiv2").hide(1000);
              vm.form.photovoltaicHeatCapUp = "0";
              vm.form.photovoltaicHeatUnitInvestCost = "0"; 
            }


            if(vm.form.isHavaGf=="1"){
              $("#areaDiv3").show(1000);
              vm.connectDiv("anchorPoin-4","anchorPoin4",anchor,"Straight",color1,"");

            }else{
            
              var key = "anchorPoin-4_anchorPoin4";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

              $("#areaDiv3").hide(1000);
              vm.form.photovoltaicCapUp = "0";
              vm.form.photovoltaicUnitInvestCost = "0"; 
            }


            if(vm.form.isHavaFj=="1"){
              $("#areaDiv4").show(1000); 
              vm.connectDiv("anchorPoin-5","anchorPoin5",anchor,"Straight",color1,""); 
            }else{
              $("#areaDiv4").hide(1000);
              vm.form.fanCapUp = "0";
              vm.form.fanUnitInvestCost = "0"; 
                          
              var key = "anchorPoin-5_anchorPoin5";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }

            
            if(vm.form.isHavaLdc=="1"){
              $("#areaDiv5").show(1000); 
              setTimeout(function(){
                vm.connectDiv("anchorPoin-7","anchorPoin7",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin7","anchorPoin-7",anchor,"Straight",color1,"");
              },1001);
            }else{
              $("#areaDiv5").hide(1000);
              vm.form.lithiumaBatteryCapUp = "0";
              vm.form.lithiumaBatteryUnitInvestCost = "0"; 
              
              var key = "anchorPoin-7_anchorPoin7";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
              var key = "anchorPoin7_anchorPoin-7";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
            }

            
            if(vm.form.isHavaQsdc=="1"){
              $("#areaDiv6").show(1000); 
              setTimeout(function(){
                vm.connectDiv("anchorPoin-8","anchorPoin8",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin8","anchorPoin-8",anchor,"Straight",color1,"");
              },1001);
            }else{
              $("#areaDiv6").hide(1000);
              vm.form.leadAcidCapUp = "0";
              vm.form.leadAcidUnitInvestCost = "0"; 
              
              var key = "anchorPoin-8_anchorPoin8";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
              var key = "anchorPoin8_anchorPoin-8";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
            }

            if(vm.form.isHavaGyfcq=="1"){
              $("#areaDiv7").show(1000); 

              setTimeout(function(){
                vm.connectDiv("anchorPoin-9","anchorPoin9",anchor,"Straight",color2,""); 
              },1001);
            
            }else{
              $("#areaDiv7").hide(1000);

              vm.form.hydrogenPurchaseLimit = "0"; 
                
              var key = "anchorPoin-9_anchorPoin9";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }

            
            if(vm.form.isHavaAlkDjc=="1"){
              $("#areaDiv77").show(1000); 

              setTimeout(function(){
                vm.connectDiv("anchorPoin-10","anchorPoin10",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-11","anchorPoin11",anchor,"Straight",color2,"");
              },1001);
              

            }else{
              $("#areaDiv77").hide(1000);

              vm.form.alkElectCellCapUp = "0";
              vm.form.alkElectCellUnitInvestCost = "0";
              
                
              var key = "anchorPoin-10_anchorPoin10";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
              
              var key = "anchorPoin-11_anchorPoin11";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
            }

            
            if(vm.form.isHavaPemDjc=="1"){
              $("#areaDiv8").show(1000); 


              setTimeout(function(){
                vm.connectDiv("anchorPoin-14","anchorPoin14",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-15","anchorPoin15",anchor,"Straight",color2,"");
              },1001);

            }else{
              $("#areaDiv8").hide(1000);

              vm.form.pemElectCellCapUp = "0";
              vm.form.pemElectCellUnitInvestCost = "0";
              
                
              var key = "anchorPoin-14_anchorPoin14";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
          
              var key = "anchorPoin-15_anchorPoin15";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }

            
            if(vm.form.isHavaAemDjc=="1"){
              $("#areaDiv9").show(1000); 


              setTimeout(function(){
                vm.connectDiv("anchorPoin-17","anchorPoin17",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-18","anchorPoin18",anchor,"Straight",color2,"");
              },1001);

            }else{
              $("#areaDiv9").hide(1000);

              vm.form.aemElectCellCapUp = "0";
              vm.form.aemElectCellUnitInvestCost = "0";
              
                
              var key = "anchorPoin-17_anchorPoin17";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
          
              var key = "anchorPoin-18_anchorPoin18";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }

            
            if(vm.form.isHavaGtcq=="1"){
              $("#areaDiv10").show(1000); 


              setTimeout(function(){
                vm.connectDiv("anchorPoin-20","anchorPoin20",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-21","anchorPoin21",anchor,"Straight",color2,"");
              },1001);

            }else{
              $("#areaDiv10").hide(1000);

              vm.form.gtHydrogenStorageCapUp = "0";
              vm.form.gtHydrogenStorageUnitInvestCost = "0";
              
                  
              var key = "anchorPoin-20_anchorPoin20";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
          
              var key = "anchorPoin-21_anchorPoin21";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }

            
            if(vm.form.isHavaQtcq=="1"){
              $("#areaDiv11").show(1000); 


              setTimeout(function(){
                vm.connectDiv("anchorPoin-22","anchorPoin22",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-23","anchorPoin23",anchor,"Straight",color2,"");
              },1001);

            }else{
              $("#areaDiv11").hide(1000);

              vm.form.qtHydrogenStorageCapUp = "0";
              vm.form.qtHydrogenStorageUnitInvestCost = "0";
              
                  
              var key = "anchorPoin-22_anchorPoin22";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
          
              var key = "anchorPoin-23_anchorPoin23";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }

            
            if(vm.form.isHavaYtcq=="1"){
              $("#areaDiv12").show(1000); 


              setTimeout(function(){
                vm.connectDiv("anchorPoin-25","anchorPoin25",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-26","anchorPoin26",anchor,"Straight",color2,"");
              },1001);

            }else{
              $("#areaDiv12").hide(1000);

              vm.form.ytHydrogenStorageCapUp = "0";
              vm.form.ytHydrogenStorageUnitInvestCost = "0";
              
                  
              var key = "anchorPoin-25_anchorPoin25";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
          
              var key = "anchorPoin-26_anchorPoin26";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }


              
            if(vm.form.isHavaRldc=="1"){
              $("#areaDiv13").show(1000); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin27","anchorPoin-27",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-28","anchorPoin28",anchor,"Straight",color3,"");
                vm.connectDiv("anchorPoin-29","anchorPoin29",anchor,"Straight",color2,"");

              },1001);
              
            }else{
              $("#areaDiv13").hide(1000);

              vm.form.fuelCellCapUp = "0";
              vm.form.fuelCellUnitInvestCost = "0";
              
                
              var key = "anchorPoin27_anchorPoin-27";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
                
              var key = "anchorPoin-28_anchorPoin28";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
                
              var key = "anchorPoin-29_anchorPoin29";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }


            }

            
            if(vm.form.isHavaJrq=="1"){
              $("#areaDiv14").show(1000); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin-30","anchorPoin30",anchor,"Straight",color3,"");
              },1001);
              
            }else{
              $("#areaDiv14").hide(1000);

              vm.form.collectorCapUp = "0";
              vm.form.collectorUnitInvestCost = "0";
                
              var key = "anchorPoin-30_anchorPoin30";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }

            
            if(vm.form.isHavaDyrb=="1"){
              $("#areaDiv15").show(1000); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin-13","anchorPoin13",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-31","anchorPoin31",anchor,"Straight",color3,"");
                vm.connectDiv("anchorPoin-32","anchorPoin32",anchor,"Straight",color4,"");

              },1001);
              
            }else{
              $("#areaDiv15").hide(1000);

              vm.form.dyHeatPumpCapUp = "0";
              vm.form.dyHeatPumpUnitInvestCost = "0";
                
              var key = "anchorPoin-13_anchorPoin13";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            

                
              var key = "anchorPoin-31_anchorPoin31";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

              var key = "anchorPoin-32_anchorPoin32";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
            }

            
            if(vm.form.isHavaKqyrb=="1"){
              $("#areaDiv16").show(1000); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin-16","anchorPoin16",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-33","anchorPoin33",anchor,"Straight",color3,"");
                vm.connectDiv("anchorPoin-34","anchorPoin34",anchor,"Straight",color4,"");

              },1001);
              
            }else{
              $("#areaDiv16").hide(1000);

              vm.form.kqyHeatPumpCapUp = "0";
              vm.form.kqyHeatPumpUnitInvestCost = "0";
                
              var key = "anchorPoin-16_anchorPoin16";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

              var key = "anchorPoin-33_anchorPoin33";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

              var key = "anchorPoin-34_anchorPoin34";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
            }

            
            if(vm.form.isHavaSyrb=="1"){
              $("#areaDiv17").show(1000); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin-19","anchorPoin19",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-35","anchorPoin35",anchor,"Straight",color3,"");
                vm.connectDiv("anchorPoin-36","anchorPoin36",anchor,"Straight",color4,"");

              },1001);
              
            }else{
              $("#areaDiv17").hide(1000);

              vm.form.syHeatPumpCapUp = "0";
              vm.form.syHeatPumpUnitInvestCost = "0";
                
              var key = "anchorPoin-19_anchorPoin19";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

              var key = "anchorPoin-35_anchorPoin35";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

              var key = "anchorPoin-36_anchorPoin36";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
            }

            
            if(vm.form.isHavaGtxr=="1"){
              $("#areaDiv18").show(1000); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin-24","anchorPoin24",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin-136","anchorPoin136",anchor,"Straight",color3,""); 
                vm.connectDiv("anchorPoin136","anchorPoin-136",anchor,"Straight",color3,""); 

              },1001);
              
            }else{
              $("#areaDiv18").hide(1000);

              vm.form.gtThermalStorageCapUp = "0";
              vm.form.gtThermalStorageUnitInvestCost = "0";
            
              var key = "anchorPoin-24_anchorPoin24";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

              var key = "anchorPoin-136_anchorPoin136";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
                          
              var key = "anchorPoin136_anchorPoin-136";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
            }
            
            if(vm.form.isHavaSxr=="1"){
              $("#areaDiv19").show(1000); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin-37","anchorPoin37",anchor,"Straight",color3,""); 
                vm.connectDiv("anchorPoin37","anchorPoin-37",anchor,"Straight",color3,""); 

              },1001);
              
            }else{
              $("#areaDiv19").hide(1000);

              vm.form.waterThermalStorageCapUp = "0";
              vm.form.waterThermalStorageUnitInvestCost = "0";
                
              var key = "anchorPoin-37_anchorPoin37";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
                
              var key = "anchorPoin37_anchorPoin-37";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }
        
            
            if(vm.form.isHavaXsszl=="1"){
              $("#areaDiv20").show(1000); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin-39","anchorPoin39",anchor,"Straight",color3,""); 
                vm.connectDiv("anchorPoin-40","anchorPoin40",anchor,"Straight",color4,""); 

              },1001);
              
            }else{
              $("#areaDiv20").hide(1000);

              vm.form.absorptionRefrigeraCapUp = "0";
              vm.form.absorptionRefrigeraUnitInvestCost = "0";
                
              var key = "anchorPoin-39_anchorPoin39";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
                
              var key = "anchorPoin-40_anchorPoin40";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }
        
            
            if(vm.form.isHavaSxl=="1"){
              $("#areaDiv21").show(1000); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin-41","anchorPoin41",anchor,"Straight",color4,""); 
                vm.connectDiv("anchorPoin41","anchorPoin-41",anchor,"Straight",color4,""); 

              },1001);
              
            }else{
              $("#areaDiv21").hide(1000);

              vm.form.chilledWaterThermalStorageCapUp = "0";
              vm.form.chilledWaterThermalStorageUnitInvestCost = "0";
                
              var key = "anchorPoin-41_anchorPoin41";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
                
              var key = "anchorPoin41_anchorPoin-41";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }
        
            
            if(vm.form.isHavaBxl=="1"){
              $("#areaDiv22").show(1000); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin-38","anchorPoin38",anchor,"Straight",color1,""); 

                vm.connectDiv("anchorPoin-42","anchorPoin42",anchor,"Straight",color4,""); 
                vm.connectDiv("anchorPoin42","anchorPoin-42",anchor,"Straight",color4,""); 

              },1001);
              
            }else{
              $("#areaDiv22").hide(1000);

              vm.form.iceThermalStorageCapUp = "0";
              vm.form.iceThermalStorageUnitInvestCost = "0";
                
              var key = "anchorPoin-38_anchorPoin38";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
                
              var key = "anchorPoin42_anchorPoin-42";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

                        
              var key = "anchorPoin-42_anchorPoin42";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }


            }
            
          
          }


        }).catch((error) => {
          console.log(error);
        });

         
          


      },
 
   
      
      getMap : function() {
        
        //初始化map_,给map_对象增加方法，使map_像Map
        var map_ = new Object();
        map_.put = function(key, value) {
            map_[key+'_'] = value;
        };
        map_.get = function(key) {
            return map_[key+'_'];
        };
        map_.remove = function(key) {
            delete map_[key+'_'];
        };
        map_.keyset = function() {
            var ret = "";
            for(var p in map_) {
                if(typeof p == 'string' && p.substring(p.length-1) == "_") {
                    ret += ",";
                    ret += p.substring(0,p.length-1);
                }
            }
            if(ret == "") {
                return ret.split(",");
            } else {
                return ret.substring(1).split(",");
            }
        };
        return map_;
      },

      generateWorkFlow : function(){
 
        
         //绿色
         var color1 = "#6ba785";
         //蓝色
         var color2 = "#4AA0D6"; 
         //红色
         var color3 = "#FF0000"; 
         var color4 = "#7030A0"; 

         
         this.connectDiv("linePoin-1","linePoin1",anchor,"Straight",color1,"");
         this.connectDiv("linePoin-2","linePoin2",anchor,"Straight",color2,"");
         this.connectDiv("linePoin-3","linePoin3",anchor,"Straight",color3,"");

        var anchor = ['Bottom', 'Top'];

        this.connectDiv("anchorPoin-1","anchorPoin1",anchor,"Straight",color1,"");
        this.connectDiv("anchorPoin1","anchorPoin-1",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-2","anchorPoin2",anchor,"Straight",color3,""); 

        this.connectDiv("anchorPoin-3","anchorPoin3",anchor,"Straight",color1,""); 

        this.connectDiv("anchorPoin-4","anchorPoin4",anchor,"Straight",color1,""); 

        this.connectDiv("anchorPoin-5","anchorPoin5",anchor,"Straight",color1,""); 

        this.connectDiv("anchorPoin-6","anchorPoin6",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-7","anchorPoin7",anchor,"Straight",color1,"");
        this.connectDiv("anchorPoin7","anchorPoin-7",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-8","anchorPoin8",anchor,"Straight",color1,"");
        this.connectDiv("anchorPoin8","anchorPoin-8",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-9","anchorPoin9",anchor,"Straight",color2,"");

        this.connectDiv("anchorPoin-10","anchorPoin10",anchor,"Straight",color1,"");
        this.connectDiv("anchorPoin-11","anchorPoin11",anchor,"Straight",color2,"");

        this.connectDiv("anchorPoin-13","anchorPoin13",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-14","anchorPoin14",anchor,"Straight",color1,"");
        this.connectDiv("anchorPoin-15","anchorPoin15",anchor,"Straight",color2,"");

        this.connectDiv("anchorPoin-16","anchorPoin16",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-17","anchorPoin17",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-18","anchorPoin18",anchor,"Straight",color2,"");

        this.connectDiv("anchorPoin-19","anchorPoin19",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-20","anchorPoin20",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-21","anchorPoin21",anchor,"Straight",color2,"");

        this.connectDiv("anchorPoin-22","anchorPoin22",anchor,"Straight",color1,"");
        this.connectDiv("anchorPoin-23","anchorPoin23",anchor,"Straight",color2,"");

        this.connectDiv("anchorPoin-24","anchorPoin24",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-25","anchorPoin25",anchor,"Straight",color1,"");

        this.connectDiv("anchorPoin-26","anchorPoin26",anchor,"Straight",color2,"");

        this.connectDiv("anchorPoin27","anchorPoin-27",anchor,"Straight",color1,"");


        this.connectDiv("anchorPoin-28","anchorPoin28",anchor,"Straight",color3,"");

        this.connectDiv("anchorPoin-29","anchorPoin29",anchor,"Straight",color2,"");

        this.connectDiv("anchorPoin-30","anchorPoin30",anchor,"Straight",color3,"");

        this.connectDiv("anchorPoin-31","anchorPoin31",anchor,"Straight",color3,"");
        this.connectDiv("anchorPoin-32","anchorPoin32",anchor,"Straight",color4,"");
        this.connectDiv("anchorPoin-33","anchorPoin33",anchor,"Straight",color3,"");
        this.connectDiv("anchorPoin-34","anchorPoin34",anchor,"Straight",color4,"");
        
        this.connectDiv("anchorPoin-35","anchorPoin35",anchor,"Straight",color3,"");

        this.connectDiv("anchorPoin-36","anchorPoin36",anchor,"Straight",color4,"");
        this.connectDiv("anchorPoin-136","anchorPoin136",anchor,"Straight",color3,"");
        this.connectDiv("anchorPoin136","anchorPoin-136",anchor,"Straight",color3,"");

        this.connectDiv("anchorPoin-37","anchorPoin37",anchor,"Straight",color3,"");
        this.connectDiv("anchorPoin37","anchorPoin-37",anchor,"Straight",color3,"");

        this.connectDiv("anchorPoin-38","anchorPoin38",anchor,"Straight",color1,"");
        this.connectDiv("anchorPoin-39","anchorPoin39",anchor,"Straight",color3,"");

        this.connectDiv("anchorPoin-40","anchorPoin40",anchor,"Straight",color4,"");

        this.connectDiv("anchorPoin-41","anchorPoin41",anchor,"Straight",color4,"");
        this.connectDiv("anchorPoin41","anchorPoin-41",anchor,"Straight",color4,"");


        this.connectDiv("anchorPoin-42","anchorPoin42",anchor,"Straight",color4,"");
        this.connectDiv("anchorPoin42","anchorPoin-42",anchor,"Straight",color4,"");

      },
    

 
    
      connectDiv : function(source,target,anchor,connector,stroke,label){
 

          var jsPlumbObj = this.getJsPlumb(stroke,connector);
  
          if(label){

              var conn = jsPlumbObj.connect({
                  source : source,
                  target : target,
                  anchor: anchor,
                  overlays : [
                      ["Arrow", { width: 5, length: 5,  location: 1 }], 
                      label
                  ] 
              });

              var connRem = this.connectionMaps.get(source+"_"+target);
        
              if(connRem){ 
                this.$jsPlumbObj.deleteConnection(connRem);  
                this.connectionMaps.put(source+"_"+target,"");
              }

              this.connectionMaps.put(source+"_"+target,conn);
              this.connectionArr.push(source+"_"+target);
            }else{
                          
              var conn = jsPlumbObj.connect({
                  source : source,
                  target : target,
                  anchor: anchor, 
                  overlays : [
                      ["Arrow", { width: 1, length: 1,  location: 1 }], 
                  ] 
              });

              
              var connRem = this.connectionMaps.get(source+"_"+target);
        
              if(connRem){ 
                this.$jsPlumbObj.deleteConnection(connRem);  
                this.connectionMaps.put(source+"_"+target,"");
              }

              this.connectionMaps.put(source+"_"+target,conn);
              this.connectionArr.push(source+"_"+target);
          }

          window.addEventListener('resize', () => {
              jsPlumbObj.repaintEverything()
          })

          return jsPlumbObj;

      },
 

      
      getJsPlumb(lineColor,connector){
          
          var connectorValue = "Flowchart";

          if(connector!=null&&connector!=""){
              connectorValue = connector;
          }

          this.$jsPlumbObj = this.$jsPlumb;

          var jsPlumb = this.$jsPlumb.getInstance({

              ConnectionsDetachable   : false,//连接是否可以使用鼠标默认分离

              //  Endpoint:['Image', {
              //    src: 'static/images/def_endpoint.png',
              //  }] , // 端点的形状
              Anchor: "Continuous", 
              Endpoint : "Blank",//端点（锚点）的样式声明（Dot）
              EndpointStyle: { radius: 1, fill: "#FFFFFF" }, //端点默认样式
              PaintStyle: { stroke: lineColor, strokeWidth: 2  }, // 连线样式
              HoverPaintStyle: { stroke: lineColor }, // 默认悬停样式
              // EndpointHoverStyle: {src: 'static/images/endpoint.png', },
              EndpointHoverStyle: { fill: lineColor }, // 端点悬停样式
              ConnectionOverlays: [
              [
                  "Arrow",
                  {
                      // 箭头
                      width:12,
                      length:12,
                      location: 1,
                      visible: true, 
                      // paintStyle: {
                      //     stroke: lineColor,
                      //     fill: lineColor
                      // }
                  }
                  
              ]
              ],
              Connector: [connectorValue, { gap: 5 }], //要使用的默认连接器的类型：折线，流程等
              DrapOptions: { cursor: "crosshair", zIndex: 2000 },
              Scope: "jsPlumb_DefaultScope"
          });

          return jsPlumb;

      },
 

    }
  }
</script>

 

<style scoped>

.configBox{
  display: block;
  width: 27vh;
  height: 67vh;
  border-radius: 2vh;
  background-image: linear-gradient(to bottom, #2946ad, #61dde37a);
}

@import '../planProgram/style/tree.css';
  img{
    width: 70px;
  }
  td{
    position: relative;
  }
  .box1{
    position: relative;
    width: 100%;
    min-height: 90vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }
  /deep/ .el-dialog {
    background:rgba(40,54,121, 0.9);
    -webkit-box-sizing: border-box;
    border: none;

  }
  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background:#374590;
  }
  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }
  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  /deep/ .el-input.is-disabled .el-input__inner{
    background-color: #161E43;
    border-color: #161E43;
    color: #FFFFFF;
    text-align: left;
    cursor: not-allowed;
  } 



  /deep/ .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #f2f2f2;
      display: inline-block;
      font-size: inherit;
      height: 31px;
      line-height: 31px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  /deep/ .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }

.imgClass{
  vertical-align: middle;
  margin-top: 5px;
  margin-left: 5px;
  width: 3vh;
  height: 3vh;
}

.imgClass2{
  vertical-align: middle;
  margin-top: 1vh;
  margin-left: 1vh;
  width: 4vh;
  height: 4vh;
}
 



.areaBox{
  display: block;
  width: 16vh;
  height: 8.6vh;
  text-align: left;
  border-radius: 12px;
  border: 1px solid #504ed557;
  background-image: -webkit-gradient(linear, left top, right top, from(#425bb5), to(#8ecd7e7a));
  background-image: linear-gradient(to right, #4274b5, #0f5d753d);
  cursor: pointer;
}

.areaBox2{
  display: block;
  width: 9vh;
  height: 9vh;
  text-align: left; 
  cursor: pointer;
}


</style>
